<template>
    <div>
      <h2>监听属性vs计算属性</h2>
      <div>
        <input type = "text" v-model = "kilometers"> 千米 = &nbsp;
        <input type = "text" v-model = "meters"> 米
      </div>
      <div style="margin-top: 20px;">
        姓:<input type = "text" v-model = "firstName">
        名:<input type = "text" v-model = "lastName">
        <p>全名:{{fullName}}</p>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Test2",
      watch : {
        kilometers:function(val) {
          this.kilometers = val;
          this.meters = this.kilometers * 1000
        },
        meters : function (val) {
          this.kilometers = val/ 1000;
          this.meters = val;
        }
      },
      data() {
        return {
          kilometers:'',
          meters: '',
          firstName: '',
          lastName: ''
        }
      },
      computed:{
        fullName:function(){
          return this.firstName + this.lastName;
        }
      }
    }
</script>

<style scoped>

</style>
